<template>
  <div class="page">
    <nav class="nav">
      <div class="left_area flex items-center">
        <el-button-group>
          <el-button type="danger">{{ meta.name }}</el-button>
          <el-button type="info">剩余礼物数量 {{ meta.left }}</el-button>
          <el-button type="info">剩余礼品总金额 {{ meta.total }}</el-button>
        </el-button-group>
        <!--        <section class="ml-2 flex items-center">-->
        <!--          <section class="mr-2">暴击奖池比例:</section>-->
        <!--          <el-input class="mr-2" v-model="input" style="width:90px" placeholder="请输入"></el-input>-->
        <!--          <el-button plain type="success" @click="setRatio">确定</el-button>-->
        <!--        </section>-->
      </div>
      <div class="center_area">
        <el-button-group>
          <el-button @click="form.type = 1;refreshData(form.type)">奖池1</el-button>
          <el-button @click="form.type = 2;refreshData(form.type)">奖池2</el-button>
          <el-button @click="form.type = 3;refreshData(form.type)">奖池3</el-button>
          <el-button @click="form.type = 4;refreshData(form.type)">奖池4</el-button>
          <el-button @click="form.type = 5;refreshData(form.type)">奖池5</el-button>
        </el-button-group>
      </div>
      <div class="right_area">
        <el-button plain type="success" @click="handleAddNew">新增</el-button>
        <el-button plain type="info" @click="handleModifyMultiple">一键修改</el-button>
      </div>
    </nav>

    <el-table
      :data="dataList"
      border
      height="70vh"
    >
      <el-table-column label="礼物名称" prop="gift_name"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="图片" prop="picture">
        <template slot-scope="{row}">
          <el-popover
            placement="right"
            trigger="hover"
            width="200"
          >
            <el-image :src="row.picture" class="big"></el-image>
            <el-image slot="reference" :src="row.picture" class="small"></el-image>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="number"></el-table-column>
      <el-table-column label="暴击数量" prop="critical_times"></el-table-column>
      <el-table-column label="品质" prop="quality"></el-table-column>

      <el-table-column label="操作" width="300">
        <template slot-scope="{row}">
          <el-button plain @click="handleEditForm(row)">编辑</el-button>
          <el-button plain type="danger" @click="handleDeleteRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="currentDialogStatus" :visible.sync="visibleEdit" @closed="handleDialogClose">
      <el-form ref="dataForm" v-model="form" :rules="rules" label-width="80px">
        <el-form-item label="库存" prop="number">
          <el-input v-model="form.number" type="number"></el-input>
        </el-form-item>
        <el-form-item label="礼物" prop="gift_id">
          <el-select v-model="form.gift_id" filterable placeholder="请选择礼物">
            <el-option
              v-for="item in giftList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button plain @click="handleCancel">取消</el-button>
        <el-button plain @click="handleSubmit">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="visible" title="编辑" @close="visible = false">
      <span class="mr-4">暴击数量: </span>
      <el-input-number v-model="critical_times" :min="0" type="number"></el-input-number>
      <div slot="footer">
        <el-button plain @click="visible = false">取消</el-button>
        <el-button plain @click="deploy">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="visibleModifyMultiple" title="一键修改" width="70vw" @close="refreshData(form.type)">
      <div class="container_modify">
        <div v-for="item in dataList" :key="item['gift_id']" class="card">
          <header class="modi_header">
            <el-avatar :src="item['picture']"></el-avatar>
            <p class="name" v-text="item['gift_name']"></p>
          </header>
          <el-input-number v-model="item['number']" :min="0" placeholder="请输入数量"></el-input-number>
        </div>
      </div>
      <div slot="footer">
        <el-button plain @click="visibleModifyMultiple = false">取消</el-button>
        <el-button plain type="primary" @click="handleConfirmBulkModification">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  alterOrAddPersonalPool,
  delPersonalPool,
  getGiftList,
  getPersonalPool,
  setNumCritical,
  toModifyMultiplePerson
} from '@/api/luckyTreeGame/luckyTreeGame'

export default {
  name: 'personalSpecialPrizePoolConfiguration',
  data() {
    return {
      input: 0,
      critical_gift_ids: [],
      visible: false,
      critical_times: 0,
      criticalRow: {},
      loading: true,
      dataList: [],   // 数据列表
      currentDialogStatus: '',   // 编辑  新增
      visibleEdit: false,
      form: {
        type: 0,
        id: undefined,
        number: 1,
        gift_id: undefined
      },
      rules: {},
      meta: {},
      giftList: [],
      visibleModifyMultiple: false   // 一键修改dialog开关
    }
  },
  mounted() {
    this.refreshData()
    this.getGiftList()
  },
  methods: {
    openDeploy(row) {
      console.log(row)
      this.criticalRow = row
      this.critical_times = row.critical_times
      this.visible = true
    },
    // 配置相关
    async deploy() {
      const res = await setNumCritical({
        critical_times: this.critical_times,
        pool_type: 40,
        pool_type_id: this.form.type,
        gift_id: this.criticalRow.gift_id,
        is_next: 1,
        user_id: 0
      })
      if (res.code === 200) {
        this.$message.success(res.message)
        this.visible = false
        await this.refreshData(this.type)
      }
    },
    // async setRatio() {
    //   const res = await setRatio({ratio: this.input * 100, type_id: this.form.type, pool_type: 40})
    //   if (res.code === 200) this.$message.success(res.message)
    //   await this.refreshData(this.type)
    // },
    async getGiftList() {
      const { data } = await getGiftList({ perPage: 1000 })
      this.giftList = data.list
    },
    async refreshData(type) {
      this.loading = true
      const { data } = await getPersonalPool(type)
      this.critical_gift_ids = data.critical_gift_ids
      this.dataList = data.list
      // console.log(this.dataList)
      this.meta = data
      this.form.type = data.type

      // const res = await getRatio(this.form.type, 40)
      // this.input = res.data.ratio / 100
      this.loading = false
    },
    async handleDeleteRow(rowData) {
      const { code } = await delPersonalPool(rowData.id)
      if (code === 200) {
        this.$message.info('删除成功')
        await this.refreshData(this.form.type)
      }
    },
    handleEditForm(rowData) {
      this.currentDialogStatus = '编辑'
      this.visibleEdit = true
      this.form.gift_id = rowData.gift_id
      this.form.id = rowData.id
      this.form.number = rowData.number
    },
    handleDialogClose() {
      this.form.id = undefined
      this.form.number = 1
      this.form.gift_id = undefined
    },
    handleCancel() {
      this.visibleEdit = false
      this.handleDialogClose()
    },
    handleModifyMultiple() {
      /*
      * 一键修改
      * */
      this.visibleModifyMultiple = true
    },
    async handleConfirmBulkModification() {
      /*
      * 确认批量修改按钮
      * */
      let result = []
      this.dataList.forEach(item => {
        result.push({
          gift_id: item.gift_id,
          gift_name: item.gift_name,
          number: item.number,
          ratio: item.ratio
        })
      })
      const { code } = await toModifyMultiplePerson({
        type: this.form.type,
        is_next: 0,
        gift_detail: JSON.stringify(result)
      })
      if (code === 200) {
        this.visibleModifyMultiple = false
        this.$message.success('修改成功！')
        await this.refreshData(this.form.type)
      }
    },
    handleAddNew() {
      /*
      * 单机新增按钮
      * */
      this.currentDialogStatus = '新增'
      this.visibleEdit = true
    },
    async handleSubmit() {
      if (this.currentDialogStatus === '编辑') {
        const { code } = await alterOrAddPersonalPool(this.form)
        if (code === 200) {
          this.visibleEdit = false
          this.$message.success('修改成功！')
          await this.refreshData(this.form.type)
        }
      } else if (this.currentDialogStatus === '新增') {
        const { code } = await alterOrAddPersonalPool({
          type: this.form.type,
          number: this.form.number,
          gift_id: this.form.gift_id
        })
        if (code === 200) {
          this.visibleEdit = false
          this.$message.success('添加成功！')
          await this.refreshData(this.form.type)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  box-sizing : border-box;
  padding    : 10px;
  margin     : 10px;

  .nav {
    margin-bottom   : 10px;
    padding         : 10px 5px;
    box-shadow      : 0 0 15px 0 rgba(0, 0, 0, .3);
    border-radius   : 5px;

    display         : flex;
    justify-content : space-between;
  }

  .small {
    width  : 50px;
    height : 50px;
  }

  .big {
    max-width  : 100px;
    max-height : 100px;
  }

  .el-pagination {
    text-align : right;
    margin-top : 20px;
  }

  &::v-deep .el-dialog__body {
    border : none;
  }

  .container_modify {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    //grid-auto-rows: 150px;
    grid-gap              : 15px;
    max-height            : 50vh;
    overflow              : auto;
    padding               : 15px;

    .card {
      border        : 1px solid rgba(0, 0, 0, .3);
      border-radius : 10px;
      //background-color: rgba(0, 0, 0, .1);
      cursor        : pointer;
      transition    : .3s;
      padding       : 15px;
      box-sizing    : border-box;

      .modi_header {
        display     : flex;
        //justify-content: center;
        align-items : center;

        .name {
          font-size   : 1.5em;
          margin-left : 20px;
        }
      }


      &:hover {
        transform  : translateY(-10px);
        //background-color: rgba(0, 0, 0, .2);
        box-shadow : 0 10px 10px 0 rgba(0, 0, 0, .3);
      }
    }
  }
}


</style>

